<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="../static/css/common.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/uploadVideo.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/swiper.min.css">
    <script src="../static/js/jquery-1.12.3.min.js"></script>
    <script src="../static/js/flexible.min.js"></script>
    <script src="../static/js/swiper.min.js"></script>
    <script src="../static/js/uploadVideo.min.js"></script>
    <title>51Talk之星 中华少年说</title>
</head>
<script>
    $(function(){
        //确认主题按钮操作
        $('.confirm').on('click', function () {
            var themeId = $('.swiper-slide-active').data('id'); //当前选中主题id
            console.log(themeId);
            $.ajax({
                url: 'xxxxx',
                type: 'get',
                dataType: 'json',
                data: { id:themeId },//数据
                success: function (list) {
                    //跳转链接
                    window.location.href = 'xxxx';
                }
            });
        });

        uploadVideo(); //动态获取视频时去掉

        //获取视频数据（如果不动态获取，可直接在html标签中添加）
        $.ajax({
            url: 'xxxxx',
            type: 'get',
            dataType: 'json',
            data: {  },//数据
            success: function (list) {
                if(list != null){
                    var videoList ="";
                    for(var i=0;i<list.length;i++){
                        //假设：list[i].id 视频id ， list[i].title 主题 ， list[i].illustrationImg 主题图 ， 
                        //list[i].video 视频url , list[i].videoImg 视频略缩图， list[i].intro 视频简介 
                        videoList += `
                        <div class="swiper-slide" data-id="`+ list[i].id +`">
                            <p class="title">`+ list[i].title +`</p>
                            <img class="illustration" src="`+ list[i].illustrationImg +`+"/>
                            <video class="video_pic" src="`+ list[i].video +`" poster="`+ list[i].videoImg +`" playsinline   x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                            <p class="intro">`+ list[i].intro +`</p>
                            <div class="video_play"></div>
                        </div>
                        `
                    }
                    videoList.length > 0 ? $('.swiper-wrapper').html(videoList):'';
                }
                uploadVideo(); 
            }
        });       
        
    }) 
</script>
<body>
    <div class="header">
        <div class="time">
            <img class="time-img" src="../static/images/uploadVideo/header.png" />
            <!---倒计时天数-->
            <p class="time-word">86</p>
        </div>
        <div class="rule">
            <a class="rule-link" href="#">
                <img class="rule-img" src="../static/images/activityRule.png" />
            </a>
        </div>
    </div>
    <section class="select-themes">
            <img src="../static/images/uploadVideo/select_themes.png"/>
    </section>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!---视频--->
            <div class="swiper-slide" data-id="1">
               <p class="title">京剧</p>
               <img class="illustration" src="../static/images/uploadVideo/illustration.png"/>
               <video class="video_pic" src="http://demo.lanrenzhijia.com/demo/51/5183/demo/vedio/sintel.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline  controls="false" x5-playsinline="" playsinline="" webkit-playsinline=""></video>
               <p class="intro">看《天天向上》小嘉宾王源亿如何讲京剧</p>
               <img class="poster-img" src="../static/images/uploadVideo/video_pic.png" />
               <div class="video_play"></div>
            </div>
            <div class="swiper-slide" data-id="2">
               <p class="title">川剧</p>
               <img class="illustration" src="../static/images/uploadVideo/illustration2.png"/>
               <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline  controls="false" x5-playsinline="" playsinline="" webkit-playsinline=""></video>   
               <p class="intro">看《天天向上》小嘉宾王源亿如何讲京剧</p>
               <img class="poster-img" src="../static/images/uploadVideo/video_pic.png" />
               <div class="video_play"></div>
            </div>
            <div class="swiper-slide" data-id="3">
               <p class="title">二十四节气</p>
               <img class="illustration" src="../static/images/uploadVideo/illustration3.png"/>
               <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline  controls="false" x5-playsinline="" playsinline="" webkit-playsinline=""></video>
               <p class="intro">看《天天向上》小嘉宾王源亿如何讲京剧</p>
               <img class="poster-img" src="../static/images/uploadVideo/video_pic.png" />
               <div class="video_play"></div>
            </div>
            <div class="swiper-slide" data-id="4">
               <p class="title">书法</p>
               <img class="illustration" src="../static/images/uploadVideo/illustration4.png"/>
               <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline  controls="false" x5-playsinline="" playsinline="" webkit-playsinline=""></video>
               <p class="intro">看《天天向上》小嘉宾王源亿如何讲京剧</p>
               <img class="poster-img" src="../static/images/uploadVideo/video_pic.png" />
               <div class="video_play"></div>
            </div>
            <div class="swiper-slide" data-id="5">
               <p class="title">珠算</p>
               <img class="illustration" src="../static/images/uploadVideo/illustration5.png"/>
               <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline  controls="false" x5-playsinline="" playsinline="" webkit-playsinline=""></video>
               <p class="intro">看《天天向上》小嘉宾王源亿如何讲京剧</p>
               <img class="poster-img" src="../static/images/uploadVideo/video_pic.png" />
               <div class="video_play"></div>
            </div>
            <div class="swiper-slide" data-id="6">
               <p class="title">京剧</p>
               <img class="illustration" src="../static/images/uploadVideo/illustration.png"/>
               <video class="video_pic" src="xxx.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline  controls="false" x5-playsinline="" playsinline="" webkit-playsinline=""></video>
               <p class="intro">看《天天向上》小嘉宾王源亿如何讲京剧</p>
               <img class="poster-img" src="../static/images/uploadVideo/video_pic.png" />
               <div class="video_play"></div>
            </div>
        </div>
    </div>
    <div class="tips"></div>
    <div class="group">所属组别: “北京赛区” “高年级”组</div>
    <a href="javascript:void(0)" class="confirm">
        <div class="submit">
            <img src="../static/images/uploadVideo/submit.png" />
        </div>
    </a>
    <iframe id="rule" name="rule" src="rule.html"></iframe>
    <script src="../static/js/common.min.js"></script>
</body>
</html>